<template>
    <div class="update">
        <el-form ref="saveFormRef" :model="saveForm" :rules="saveRules" class="update-form" label-width="80px">
            <h2 class="title">帖子发布</h2>
            <el-form-item prop="title" label="标题">
                <el-input v-model="saveForm.title" maxlength="50" show-word-limit/>
            </el-form-item>
            <el-form-item prop="coverImage" label="图片">
                <el-upload
                    class="upload-demo"
                    :action="uploadAction"
                    :on-success="uploadSuccess"
                    accept="image/*"
                    with-credentials
                    :limit="1"
                    list-type="picture"
                >
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                    <div class="upload-tip">
                        jpg/png 图片不能大于 500kb
                    </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item prop="content" label="内容">
                <!-- 富文本编辑器 -->
                <!-- <div style="border: 1px solid #ccc">
                    <Toolbar
                        style="border-bottom: 1px solid #ccc"
                        :editor="editorRef"
                        :defaultConfig="toolbarConfig"
                        :mode="mode"
                    />
                    <Editor
                        style="height: 330px; overflow-y: hidden;"
                        v-model="saveForm.content"
                        :defaultConfig="editorConfig"
                        :mode="mode"
                        @onCreated="handleCreated"
                    />
                </div> -->
                <el-input type="textarea" v-model="saveForm.content" clearable :rows="10" maxlength="500" show-word-limit/>
            </el-form-item>
            <el-form-item style="width: 100%;">
                <el-button type="primary" @click="doSave" style="width: 100%;">发布</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, shallowRef, onBeforeUnmount } from "vue";
import { baseURL } from '../global';
// import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // 富文本相关
// import '@wangeditor/editor/dist/css/style.css'

const { proxy } = getCurrentInstance()
//表单相关
const saveFormRef = ref(null)
const saveForm = reactive({})

const doSave = () => {
    saveFormRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        let params = Object.assign({}, saveForm)
        let result = await proxy.axios.post('forum/save', params)
        console.log(result)
        if (!result) {
            return
        }
        proxy.msg.success("发布成功");
        proxy.router.push('/home')
    })
}

// //配置富文本编辑器
// // 编辑器实例，必须用 shallowRef
// const editorRef = shallowRef()
// const mode = ref('default')
// const toolbarConfig = {}
// const editorConfig = { 
//     placeholder: '请输入内容...',
//     MENU_CONF: {
//         uploadImage: {
//         server: 'http://localhost:8082/web/image/editor/upload',
//         fieldName: 'file',
//         allowedFileTypes: ['image/*'],
//         withCredentials: true,
//         base64LimitSize: 100 * 1024
//         }
//     }
// }

// const handleCreated = (editor) => {
//     editorRef.value = editor // 记录 editor 实例，重要！
// }
// onBeforeUnmount(() => {
//     const editor = editorRef.value
//     if (editor == null) return
//     editor.destroy()
// })

const saveRules = {
    coverImage: [
        {
            required: true,
            message: "请上传图片",
        },
    ],
    title: [
        {
            required: true,
            message: "请输入标题",
        },
    ],
    content: [
        {
            required: true,
            message: "请输入内容",
        },
    ]
}

// 图片上传
const uploadAction = ref(baseURL + 'image/upload')
const uploadSuccess = (response, uploadFile, uploadFiles) => {
	if (response.code !== 0) {
		this.msg.error(response.msg)
	} else {
		saveForm.coverImage = response.data
	}
}

</script>

<style lang="scss" scoped>
.update {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-size: cover;
}
.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}

.update-form {
    border-radius: 6px;
    background: #ffffff;
    width: 80%;
    padding: 30px 30px 10px 30px;
    .el-input {
        height: 38px;
        input {
            height: 38px;
        }
    }
    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}
.update-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}
.update-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
        cursor: pointer;
        vertical-align: middle;
    }
}
.update-code-img {
    height: 38px;
}
</style>